<template>
	<div class="giftDetail">
		<div class="head">
			<head-top goBack="true">
				<router-link style='position: relative;' slot="car" :to="{path: '/shopCarindex',query: {hide:'yes'}}">
					<span class="iconfont icon-gouwuche2"></span>
					<span class="badge-count" v-if="sureGiftNum">{{sureGiftNum}}</span>
				</router-link>
			</head-top>
			<div class="newPlaceholder"></div>
			<img :src="giftinfo.GiftImg" alt>
			<div class="title">
				<div class="flexBetween">
					<span>{{giftinfo.GiftName}}</span>
					<span>市场价</span>
				</div>
				<div class="flexBetween">
					<span>
						{{giftinfo.IntegralValue}}
						<span>积分</span>
					</span>
					<span>{{giftinfo.GiftMarketPrice}}元</span>
				</div>
			</div>
		</div>
		<div class="date">
			<div class="flexBetween">
				<span class="iconfont icon-riqi">有效期</span>
				<span class="time">{{giftinfo.StartTime|formatDate}}至{{giftinfo.EndTime|formatDate}}</span>
			</div>
		</div>
		<div class="main">
			<div id="GiftContent" style="width:100%" v-html="giftinfo.GiftContent"></div>
		</div>
		<div class="footer flex">
			<div class="flexGrow" @click="addCard">加入购物车</div>
			<a class="flexGrow" @click="goseletment">立即兑换</a>
		</div>
		<div class="mask" v-if="maskShow">
			<div class="bigCon">
				<div class="top">
					<div class="topImg flexCenter">
						<img :src="giftinfo.GiftImg" alt>
					</div>
					<div class="flexGrow" style="display:flex;flex-direction:column;">
						<span>{{giftinfo.GiftName}}</span>
						<span>
							{{giftinfo.IntegralValue}}
							<span>积分</span>
						</span>
					</div>
					<span class="iconfont icon-cuo" @click="close"></span>
				</div>
				<div class="detail">
					<div class="flexBetween">
						<span>数量</span>
						<div class="flexCenter">
							<!-- <span class="btn" @click="del">-</span>
              <input type="number" v-model="GiftNum">
              <span class="btn" @click="add">+</span> -->
							<span @click="del" class="iconfont icon-jianhao1"></span>
							<span>{{GiftNum}}</span>
							<span @click="add" class="iconfont icon-jiahao1"></span>
						</div>
					</div>
				</div>
				<span @click="addshopcart" class="footer_2">确定</span>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		Toast
	} from "mint-ui";
	import {
		getStore
	} from "../../config/mUtils";
	import headTop from "src/components/header/newHead";
	export default {
		data() {
			return {
				giftinfo: {},
				GiftNum: "1",
				maskShow: false,
				sureGiftNum:'',
				shopcartinfo: {},
				userinfo: {}
			};
		},
		components: {
			headTop,
		},
		filters: {
			formatDate: function(val) {
				if (val) {
					return val.split(' ')[0];
				}
			}
		},
		methods: {
			getgiftdetail(id) {
				this.$axios
					.get("integral.gift.getdetail", {
						params: {
							id: id
						}
					})
					.then(p => {
						this.giftinfo = p.data.result;
					});
			},
			del() {
				if (this.GiftNum - 1 > 0) {
					this.GiftNum--;
				} else {
					Toast({
						message: "受不了了，宝贝不能再减少了哦",
						iconClass: "iconfont icon-cuo",
						duration: 1000
					});
				}
			},
			goseletment() {
				this.shopcartinfo.GiftId = this.giftinfo.Id;
				this.shopcartinfo.GiftTypeId = this.giftinfo.GiftType;
				this.shopcartinfo.GiftNum = this.GiftNum;
				this.shopcartinfo.InuserId = this.userinfo.Id;
				this.shopcartinfo.EnterpriseId = this.userinfo.EnterpriseId;
				this.shopcartinfo.GiftName = this.giftinfo.GiftName;
				this.shopcartinfo.GiftTypeName = this.giftinfo.GiftTypeName;
				this.shopcartinfo.GiftMarketPrice = this.giftinfo.GiftMarketPrice;
				this.shopcartinfo.IntegralValue = this.giftinfo.IntegralValue;
				this.shopcartinfo.GiftNum = 1;
				this.shopcartinfo.GiftImg = this.giftinfo.GiftImg;
				this.$router.push({
					path: '/exchange',
					query: {
						'giftlist': JSON.stringify([this.shopcartinfo]),
						'type': 1
					}
				});
			},
			add() {
				this.GiftNum++;
			},
			addshopcart() {
				this.shopcartinfo.GiftId = this.giftinfo.Id;
				this.shopcartinfo.GiftTypeId = this.giftinfo.GiftType;
				this.shopcartinfo.GiftNum = this.GiftNum;
				this.sureGiftNum=this.GiftNum;
				this.shopcartinfo.InuserId = this.userinfo.Id;
				this.shopcartinfo.EnterpriseId = this.userinfo.EnterpriseId;
				this.$axios.post("integral.shopcart.add", this.shopcartinfo).then(p => {
					if (p.data.status == "10001") {
						Toast({
							message: "添加成功，在购物车等亲~",
							iconClass: "iconfont icon-dui",
							duration: 1000
						});
						this.maskShow = false;
					} else {
						Toast({
							message: "添加失败，很抱歉亲~",
							iconClass: "iconfont icon-cuo",
							duration: 1000
						});
					}
				});
			},
			addCard() {
				this.maskShow = true;
			},
			close() {
				this.maskShow = false;
			}
		},
		created() {
			this.userinfo = getStore("userInfo");
			this.getgiftdetail(this.$route.query.id);
		}
	};
</script>
<style lang="scss" scoped>
	.giftDetail {
		background-color: white;
		position: relative;

		.head {
			.iconfont {
				color: rgba(86, 86, 86, 0.5);
			}

			.icon-gouwuche2 {
				font-size: 1.391304rem;
			}

			img {
				width: 100%;
			}

			>div.title {
				padding: 0 0.652174rem 0.434783rem;

				>div:nth-child(1) {
					margin-bottom: 0.217391rem;

					>span:nth-child(1) {
						font-size: 0.608696rem;
						font-weight: 700;
						color: #101010;
					}

					>span:nth-child(2) {
						font-size: 0.521739rem;
						color: #888888;
					}
				}

				>div:nth-child(2) {
					>span:nth-child(1) {
						font-size: 0.782609rem;
						font-weight: 700;
						color: #fb5d57;

						span {
							font-size: 0.521739rem;
							color: #999999;
							font-weight: 400;
							padding-left: 0.217391rem;
						}
					}

					span:nth-child(2) {
						font-size: 0.608696rem;
						color: #888888;
					}
				}
			}
		}

		.date {
			background-color: rgba(240, 240, 240, 1);
			padding: 0.26087rem 0.652174rem;

			.icon-riqi {
				color: #888;
				font-size: 0.608696rem;
			}

			.time {
				color: #888;
				font-size: 0.608696rem;
			}
		}

		.main {
			font-size: 0.608696rem;
			padding: 0.652174rem 0.652174rem 2.608696rem;

			.mainItem {
				margin-bottom: 0.869565rem;

				.title {
					padding-bottom: 0.217391rem;
					font-size: 0.695652rem;
				}

				.content {
					text-align: justify;
					word-break: break-all;
				}
			}

			>div:last-child {
				margin-bottom: 0;

				img {
					width: 100%;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

			div {
				text-align: center;
				color: white;
				font-size: 0.608696rem;
				height: 1.913043rem;
				line-height: 1.913043rem;
			}

			div:nth-child(1) {
				background-color: #f99d29;
			}

			a:nth-child(2) {
				display: block;
				text-align: center;
				color: white;
				font-size: 0.608696rem;
				height: 1.913043rem;
				line-height: 1.913043rem;
				background-color: #fb5d57;
			}
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
			width: 100%;
			height: 100%;

			.bigCon {
				position: absolute;
				bottom: 0;
				width: 100%;
				background-color: white;

				.top {
					display: flex;
					padding: 0.652174rem;

					.topImg {
						width: 3.434783rem;
						height: 3.521739rem;
						background-color: white;
						margin-top: -1.086957rem;
						overflow: hidden;
						padding: 3px;
						border-radius: 4px;

						img {
							width: 100%;
						}
					}

					>div:nth-child(2) {
						padding-left: 0.434783rem;

						span:nth-child(1) {
							font-size: 0.608696rem;
							font-weight: 700;
							color: #101010;
						}

						span:nth-child(2) {
							font-size: 0.782609rem;
							font-weight: 700;
							color: #fb5d57;

							span {
								font-size: 0.521739rem;
								color: #999999;
								font-weight: 400;
								padding-left: 0.217391rem;
							}
						}
					}

					.icon-cuo {
						font-size: 1.086957rem;
						color: #ec4033;
						margin-top: -0.086957rem;
					}
				}

				.detail {
					>div {
						border-top: 1px solid #eee;
						padding: 0.434783rem 1.130435rem;

						>span {
							font-size: 0.695652rem;
							width: 19%;
						}

						>div {
							span:nth-child(1) {
								color: #ddd;
								font-size: 0.8rem;
							}

							span:nth-child(2) {
								color: rgba(16, 16, 16, 0.4);
								font-size: 0.77rem;
								padding: 0 .217391rem;
							}

							span:nth-child(3) {
								color: #3190e8;
								font-size: 0.9rem;
							}
						}
					}
				}
			}

			.footer_2 {
				height: 1.913043rem;
				line-height: 1.913043rem;
				background-color: #fb5d57;
				color: white;
				font-size: 0.608696rem;
				text-align: center;
				display: block;
			}
		}
	}



.badge-count {
    position: absolute;
    top: 0;
    right: -5px;
    height: 20px;
		line-height: 20px;
    border-radius: 10px;
    min-width: 20px;
    background: #ed4014;
    color: #fff;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}

</style>
